import React from "react";
import Price from "@/app/components/Content/Shop/Price";

const Shop = () => {
  return <div className="mb-12">
    <header className="px-4 flex justify-between items-center  ">
      <div>
        <p className="md:text-sm lg:text-xl  text-[#646464] font-[600]">SHOP</p>
        <p className="text-[#24252C] font-[600] text-2xl">飓风新装</p>
      </div>

      <div className="md:hidden xs:hidden lg:flex felx cursor-pointer">
        <span>访问商店</span>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor"
             className="size-6">
          <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
        </svg>
      </div>
    </header>

    <div
      className="mt-12 grid xs:grid-cols-2  xs:grid-rows-2 md:grid-cols-2  md:grid-rows-2 lg:grid-cols-5 lg:grid-rows-3 ">
      <div
        className="xs:col-span-3 xs:row-span-1 md:col-span-3 md:row-span-1 lg:col-span-1 lg:row-span-3 col-span-1 row-span-3 relative md:flex md:justify-end xs:flex xs:justify-end  bg-[#f9fafa]">
        <img src="/images/shop/1.png" className="xs:w-36 md:w-36  lg:w-auto  hover:scale-110 transition"/>
        <Price priceObj={{
          title: '凉“伴”抗菌短袖',
          typeName: '短袖/2025 SS',
          price: 99
        }}/>
      </div>

      <div
        className="bg-white xs:col-span-1 md:col-span-1 lg:col-auto col-auto   relative md:flex md:justify-end xs:flex xs:justify-end">
        <img src="/images/shop/2.png" className="xs:w-36 md:w-36 lg:h-auto hover:scale-110 transition"/>
        <Price priceObj={{
          title: '尼龙衬衫',
          typeName: '短袖/2025 SS',
          price: 99
        }}/>
      </div>

      <div
        className="bg-[#f9fafa] xs:col-span-2 md:col-span-2 lg:col-auto col-auto  relative md:flex md:justify-end xs:flex xs:justify-end">
        <img src="/images/shop/3.png" className="xs:w-36 md:w-36 lg:h-auto hover:scale-110 transition"/>
        <Price priceObj={{
          title: '四维嘻嘻T',
          typeName: '短袖/2025 SS',
          price: 99
        }}/>
      </div>
      <div className="relative md:flex md:justify-end xs:flex xs:justify-end">
        <img src="/images/shop/4.png" className="xs:w-36 md:w-36 lg:h-auto hover:scale-110 transition"/>
        <Price priceObj={{
          title: '讨好型人格T',
          typeName: '短袖/2025 SS',
          price: 99
        }}/>
      </div>


      <div className="relative md:flex md:justify-end xs:flex xs:justify-end">
        <img src="/images/shop/5.png" className="xs:w-36 md:w-36 lg:h-auto hover:scale-110 transition"/>
        <Price priceObj={{
          title: '复古解构',
          typeName: '短袖/2025 SS',
          price: 99
        }}/>
      </div>

      <div className=" xs:hidden md:hidden lg:flex relative justify-end">
        <img src="/images/shop/6.png" className="xs:w-36 md:w-36 lg:h-auto hover:scale-110 transition"/>
        <Price priceObj={{
          title: '口袋装饰T',
          typeName: '短袖/2025 SS',
          price: 99
        }}/>
      </div>

      <div className="bg-[#f9fafa] xs:hidden md:hidden lg:flex relative justify-end">
        <img src="/images/shop/7.png" className="xs:w-36 md:w-36 lg:h-auto hover:scale-110 transition"/>
        <Price priceObj={{
          title: '飓轻防晒衣',
          typeName: '短袖/2025 SS',
          price: 169
        }}/>
      </div>

      <div className="xs:hidden md:hidden lg:flex relative justify-end">
        <img src="/images/shop/8.png" className="xs:w-36 md:w-36 lg:h-auto hover:scale-110 transition"/>
        <Price priceObj={{
          title: 'Coolmax流线T',
          typeName: '短袖/2025 SS',
          price: 99
        }}/>
      </div>

      <div className="bg-[#f9fafa] xs:hidden md:hidden lg:flex relative justify-end ">
        <img src="/images/shop/9.png" className="xs:w-36 md:w-36 lg:h-auto hover:scale-110 transition"/>
        <Price priceObj={{
          title: '插肩短袖',
          typeName: '短袖/2025 SS',
          price: 99
        }}/>
      </div>

      <div className="xs:hidden md:hidden lg:flex flex col-span-2 justify-end  relative">
        <img src="/images/shop/10.png" className="xs:w-36 md:w-36 lg:h-auto hover:scale-110 transition"/>
        <Price priceObj={{
          title: '华体logoT',
          typeName: '短袖/2025 SS',
          price: 99
        }}/>
      </div>

      <div className="bg-[#f9fafa]   xs:hidden md:hidden lg:flex flex col-span-2 justify-end  relative">
        <img src="/images/shop/11.png" className="xs:w-36 md:w-36 lg:h-auto hover:scale-110 transition"/>
        <Price priceObj={{
          title: '胶囊防晒',
          typeName: '短袖/2025 SS',
          price: 279
        }}/>
      </div>

    </div>
  </div>
}

export default Shop;